<template >
<!-- 大数据可视化 -->
  <div class="demoXX">
    <div class="elmaindemo">
      <div class="rq">
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple">
            <div class="T1">
               <el-card class="box-card" id="TB1">
				  <div class="A1"></div>		
                  <div class="touA1"><span>司机</span></div>

					<el-descriptions>
						<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
						<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
						<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
						<el-descriptions-item label="备注">
						<el-tag size="small">学校</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
					</el-descriptions>
                   <h1>AAAAAAAAAAAAAAAAAAAAAA</h1>
              </el-card> 
              <el-card class="box-card" id="TB2">
                  <div class="A2"></div>		
                  <div class="touA2"><span>车辆装载</span></div>
					<!-- 大数据可视化 -->
					<div ref="mychat" id="mainA2" class="mainBoxA"></div>		
              </el-card>  
              <el-card class="box-card" id="TB3">
				  <div class="A2"></div>			
                  <span class="touA3">目的地运输量</span>
				  	<!-- 大数据可视化 -->
				    <div id="mainA3" style="width: 280px;height:400px;"></div>
              </el-card> 
                <h1>ttttttttttttttttttttttttttt</h1>
            </div>
            </div></el-col>

          <el-col :span="12"><div class="grid-content bg-purple">
              <div class="mapA">
                <h1>运单统计</h1>
                    <div calss ="smalltitle">
                      <el-card  id="SmaT2">
                        <span class="B02">待发车</span>
                        <img data-v-0aaa3cd8="" src="../../../../assets/zhifeiji.png" alt="" class="img2"/>
						<span class="B03">运输中</span>
                        <img data-v-0aaa3cd8="" src="../../../../assets/xiaohuoche.png" alt="" class="img3"/>
						<span class="B04">已到达</span>
                        <img data-v-0aaa3cd8="" src="../../../../assets/mudidi.png" alt="" class="img4"/>
                       </el-card> 
                     <el-card  id="SmaT1">
                          <div class="B01"><span>运单总数</span></div>
                          <div><img data-v-0aaa3cd8="" src="../../../../assets/1.3d3a506e.png" alt="" class="img1"/></div>
                          <h1>TBBBBBBBBBBBBBBBBBBBBBBBBB</h1>
                      </el-card> 

                  </div>  
              </div>
              <div class="mapB">
                  <div calss ="smalltitle">
                  </div>
                  <!-- 这是地图 -->
                  <div class="map-container" style="width: 651px; height: 700px" ref="myEchart" id="china_map"></div>
              </div></div></el-col>
			  
          <el-col :span="6">
			<div class="grid-content bg-purple">
              <el-card class="box-card" id="TC1">
				<div class="C1"></div>		
				<div class="touC1"><span>运输准时率</span></div>
				<div data-v-0aaa3cd8="" class="con-c-box">
				<div data-v-0aaa3cd8="" class="con-l-box">
				<img data-v-0aaa3cd8="" src="../../../../assets/sh.png" alt=""  class="imgC01"  width="50px"  height="50px" />
				<span data-v-0aaa3cd8="" class="numC01">50%</span>
				<span data-v-0aaa3cd8="" class="nameC02" >发出准时率</span>
				</div>
      
			<img data-v-0aaa3cd8=""
			src=""
			alt=""
			class="lineC01"
			/>
        <div data-v-0aaa3cd8="" class="con-r-box">
          <img
            data-v-0aaa3cd8=""
            src=""
            alt=""
            class="imgC02"
            width="40px"
            height="45px"
          />
          <span data-v-0aaa3cd8="" class="numC03">75%</span>
          <span data-v-0aaa3cd8="" class="nameC04">到达准时率</span>
        </div>
       </div>	
	</el-card> 
			<el-card class="box-card" id="TB2" style="width:315px;height:200px">
				<div class="C1"></div>		
				<!-- 大数据可视化 -->
				<span  class="touC2">异常运输</span>
				<div class="Ctest01">异常运输任务总数</div>
				<div style="width: 170px;height: 170px;background-color: #white;  position: relative; top: -55px;left: 126px;" ref="chartContent"></div>
				
			</el-card>  
				<el-card class="box-card" id="TB3">
				<div style="width: 15px; height: 18px;"></div>		
				<span  class="touC2">运输任务编号</span>
				<h1>TBBBBBBBBBBBBBBBBBBBBBBBBB</h1>
			</el-card>
			<div class="imgCBox">
				<img
					data-v-0aaa3cd8=""
					src=""
					alt=""
					style="width: 15px; height: 60px; position: relative; top: -123px;left: 100px" 
				/>
				<img
					data-v-0aaa3cd8=""
					src=""
					alt=""
					style="width: 15px; height: 60px; position: relative; top: -123px;left: -85px" 
				/>
			</div>	

		

			
			<el-card class="box-card" id="TB4">
			<div slot="header" class="clearfix">
				<span>卡片名称</span>
				<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
			</div>
				<h1>日日日日</h1>
			</el-card> 
				
                <h1>ttttttttttttttttttttttttttt</h1>
            </div></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'C:/Users/光/Desktop/备份项目地址/s4vuex项目/luoqing_tms_front_end/node_modules/echarts'
require('C:/Users/光/Desktop/备份项目地址/s4vuex项目/luoqing_tms_front_end/node_modules/echarts/map/js/china')
export default {
	// 目的地运输	
	name: "TEMPLATE",
    data() {
      return {
        chartData:'88.23'
      }
    },
    methods:{
      showChart(){
          let chart = echarts.init(this.$refs.chartContent);
          var data = {
            value: this.chartData,
            company: "年度能耗",
            ringColor: [{
              offset: 0,
              color: '#c23531' 
            }, {
              offset: 1,
              color: '#367bec' 
            }]
          }
          let option = {
            title: {
              text: data.value +'\n'+ data.company,
              x: 'center',
              y: 'center',
              textStyle: {
                color: '#0674faa2',
                fontSize: '15'
              }
            },
            color: ['#d3d0cf'],
            legend: {
              show: false,
              data: []
            },
            series: [{
              name: 'Line 1',
              type: 'pie',
              clockWise: true,
              radius: ['55', '65'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              },
              hoverAnimation: false,
              data: [{
                value: data.value,
                name: '',
                itemStyle: {
                  normal: {
                    color: { 
                      colorStops: data.ringColor
                    },
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }, {
                name: '',
                value: 100 - data.value
              }]
            }]
          };
          chart.clear();
          chart.setOption(option);
 
        },
    },
      mounted(){
		 this.showChart();
		// 以下是地图
        let data = [
 			{ "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
 			"name": "天津",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "248"
 		}, { "name": "河北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
 			"name": "山西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "250"
 		}, { "name": "内蒙古", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
 			"name": "辽宁",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "252"
 		}, { "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
 			"name": "黑龙江",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "254"
 		}, { "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
 			"name": "江苏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "256"
 		}, { "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
 			"name": "安徽",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "258"
 		}, { "name": "福建", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
 			"name": "江西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "260"
 		}, { "name": "山东", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" }, {
 			"name": "河南",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "262"
 		}, { "name": "湖北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
 			"name": "湖南",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "264"
 		}, { "name": "广东", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" }, {
 			"name": "广西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "266"
 		}, { "name": "海南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" }, {
 			"name": "重庆",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "268"
 		}, { "name": "四川", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" }, {
 			"name": "贵州",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "270"
 		}, { "name": "云南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" }, {
 			"name": "西藏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "272"
 		}, { "name": "陕西", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
 			"name": "甘肃",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "274"
 		}, { "name": "青海", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" }, {
 			"name": "宁夏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "276"
 		}, { "name": "新疆", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" }, {
 			"name": "台湾",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "278"
 		}, { "name": "香港", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
 			"name": "澳门",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "280"
			}]
			let chinaGeoCoordMap ={
								'黑龙江': [127.9688, 45.368,1],
								'内蒙古': [110.3467, 41.4899,1],
								'吉林': [125.8154, 44.2584,1],
								'北京': [116.4551, 40.2539,2],
								'辽宁': [123.1238, 42.1216,1],
								'河北': [114.4995, 38.1006,1],
								'天津': [117.4219, 39.4189,1],
								'山西': [112.3352, 37.9413,1],
								'陕西': [109.1162, 34.2004,1],
								'甘肃': [103.5901, 36.3043,1],
								'宁夏': [106.3586, 38.1775,1],
								'青海': [101.4038, 36.8207,1],
								'新疆': [87.9236, 43.5883,1],
								'西藏': [91.11, 29.97,1],
								'四川': [103.9526, 30.7617,1],
								'重庆': [108.384366, 30.439702,1],
								'山东': [117.1582, 36.8701,1],
								'河南': [113.4668, 34.6234,1],
								'江苏': [118.8062, 31.9208,1],
								'安徽': [117.29, 32.0581,1],
								'湖北': [114.3896, 30.6628,1],
								'浙江': [119.5313, 29.8773,1],
								'福建': [119.4543, 25.9222,1],
								'江西': [116.0046, 28.6633,1],
								'湖南': [113.0823, 28.2568,1],
								'贵州': [106.6992, 26.7682,1],
								'云南': [102.9199, 25.4663,1],
								'广东': [113.12244, 23.009505,1],
								'广西': [108.479, 23.1152,1],
								'海南': [110.3893, 19.8516,1],
								'上海': [121.4648, 31.2891,1],
								'台湾': [120.991676054688, 24.7801149726563,1],
								'澳门': [113.33, 22.11,1],
								'香港': [114.15, 22.15,1]
			}
			for (let i=0;i<data.length;i++){
						var da = chinaGeoCoordMap[data[i].name];
						chinaGeoCoordMap[data[i].name]=[...da,...data[i].dataCount];
			}
			let chinaDatas = [
						[{
						name: '北京',
						value: 2
						}], [{
						name: '黑龙江',
						value: 1
						}], [{
						name: '内蒙古',
						value: 1
						}], [{
						name: '吉林',
						value: 1
						}], [{
						name: '辽宁',
						value: 1
						}], [{
						name: '河北',
						value: 1
						}], [{
						name: '天津',
						value: 1
						}], [{
						name: '山西',
						value: 1
						}], [{
						name: '陕西',
						value: 1
						}], [{
						name: '甘肃',
						value: 1
						}], [{
						name: '宁夏',
						value: 1
						}], [{
						name: '青海',
						value: 1
						}], [{
						name: '新疆',
						value: 1
						}], [{
						name: '西藏',
						value: 1
						}], [{
						name: '四川',
						value: 1
						}], [{
						name: '重庆',
						value: 1
						}], [{
						name: '山东',
						value: 1
						}], [{
						name: '河南',
						value: 1
						}], [{
						name: '江苏',
						value: 1
						}], [{
						name: '安徽',
						value: 1
						}], [{
						name: '湖北',
						value: 1
						}], [{
						name: '浙江',
						value: 1
						}], [{
						name: '福建',
						value: 1
						}], [{
						name: '江西',
						value: 1
						}], [{
						name: '湖南',
						value: 1
						}], [{
						name: '贵州',
						value: 1
						}], [{
						name: '广东',
						value: 1
						}], [{
						name: '广西',
						value: 1
						}], [{
						name: '云南',
						value: 1
						}], [{
						name: '海南',
						value: 1
						}], [{
						name: '上海',
						value: 1
						}], [{
						name: '台湾',
						value: 1
						}], [{
						name: '澳门',
						value: 1
						}], [{
						name: '香港',
						value: 1
						}]
			]
			let convertData = function (data) {
						var res = [];
						for (var i = 0; i < data.length; i++) {
						var dataItem = data[i];
						var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
						var toCoord = [117.1582, 36.8701];
						if (fromCoord && toCoord) {
							res.push([{
							coord: fromCoord,
							value: dataItem[0].value
							}, {
							coord: toCoord,
							}]);
						}
						}
						return res;
			};
			let seriesA = []
			seriesA.push(
				{
				type: 'lines',
				zlevel: 1,
				effect: {
					show: true,
					period: 4, //箭头指向速度，值越小速度越快
					trailLength: 0.3, //特效尾迹长度[0,1]值越大，尾迹越长重
					symbol: 'pin', //箭头图标
					symbolSize: 8, //图标大小
					color: '#2a6fd9'
				},
				lineStyle: {
					normal: {
					color: '#003262',
					width: 1,//尾迹线条宽度
					opacity: .9, //尾迹线条透明度
					curveness: .3 //尾迹线条曲直度
					}
				},
				data: convertData(chinaDatas)
				},
				{
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: { // 涟漪特效
					period: 2, // 动画时间，值越小速度越快
					brushType: 'fill', // 波纹绘制方式 stroke, fill
					scale: 6, // 波纹圆环最大限制，值越大波纹越大
					color: '#003262' // 涟漪的颜色，默认为散点的颜色。
				},
				label: {
					normal: {
					show: true,
					color: '#283c64',
					position: 'top', // 显示位置
					offset: [0, 0], // 偏移设置
					formatter: function (params) { // 圆环显示文字
						return params.data.name
					},
					fontSize: 13
					},
					emphasis: {
					show: false
					}
				},
				symbol: 'circle',
				symbolSize: function (val) {
					return 1 + val[2] * 5 // 圆环大小
				},
				itemStyle: {
				color: "#2a6fd9",
					shadowBlur: 4,
					shadowColor: "#2a6fd9",
				},
				data: chinaDatas.map(function (dataItem) {
					return {
					name: dataItem[0].name,
					value: chinaGeoCoordMap[dataItem[0].name],
					itemStyle: {
						color: "#2a6fd9",
					shadowBlur: 4,
					shadowColor: "#2a6fd9",
					}
					}
				})
				},
				//被攻击点
				{
				type: 'scatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				label: {
					normal: {
					show: false,
					position: 'right',
					color: 'red',
					formatter: '{b}',
					textStyle: {
						color: "red"
					}
					},
					emphasis: {
					show: true,
					color: "red"
					}
				},
				symbol: 'pin',
				symbolSize: 0,
				data: [{
					name: '山东',
					value: chinaGeoCoordMap['山东'].concat([10]),
				}],
				}
			);
			let option = {
				tooltip: {
					show: true,
					trigger: 'item',
					backgroundColor: '#2e65fd',
					borderColor: '#FFFFCC',
					showDelay: 0,
					hideDelay: 0,
					enterable: true,
					transitionDuration: 0,
					extraCssText: 'z-index:100',
					formatter: function (params, ticket, callback) {
						console.log(params)
						// 根据业务自己拓展要显示的内容
						var res = ''
						var name = params.name
						var value1 = params.value[params.seriesIndex + 3] || 0
						var value2 = params.value[params.seriesIndex + 4] || 0
						var value3 = params.value[params.seriesIndex + 5] || 0
						var value4 = params.value[params.seriesIndex + 6] || 0
						var value5 = params.value[params.seriesIndex + 7] || 0
						var value6 = params.value[params.seriesIndex + 8] || 0
						var value7 = params.value[params.seriesIndex + 9] || 0
						res = "<span style='color:#fff'>" + name + '</span>' +
								'<br/>' +
								'<i class="icon icon-xuesheng"></i> 学生：' + value1+
								'<br/>' +
								'<i class="icon icon-laoshi_huaban"></i> 老师：'+value2+
								'<br/>' +
								'<i class="icon icon-baoanxiehui"></i> 青企协：'+value3+
								'<br/>' +
								'<i class="icon icon-rencaizhengce"></i> 青年企业家：'+value4+
								'<br/>' +
								'<i class="icon icon-investmentinstitutions"></i> 十强产业：'+value5+
								'<br/>' +
								'<i class="icon icon-caozuoyaoqingjiabin"></i> 峰会嘉宾：'+value6+
								'<br/>' +
								'<i class="icon icon-rencai"></i> 高端人才：'+value7
						return res
					}
				},
					regions: [
					//隐藏南海
					{
					name: "南海诸岛",
					itemStyle: {
						normal: {
						borderColor: "red",
						borderWidth: 20, //设置外层边框
						opacity: 0, // 为 0 时不绘制该图形
						},
					},
					label: {
						show: false, // 隐藏文字
					},
					},
				],
				backgroundColor: "rgba(0, 0, 0, 0.1)",
				geo: {
				map: 'china',
				zoom: 1.5,
				roam: true, // 是否允许缩放
					itemStyle: {
					normal: {
						//地图便框设置
					borderColor: "#003262",
					borderWidth: 11, //设置外层边框
					},
					emphasis: {
					areaColor: "#003262",
					shadowColor: "#003262",
					},
					},
				itemStyle: {
					normal: {
					color: '', // 地图背景色
					borderColor: '#5ea8ff', // 省市边界线00fcff 516a89
					borderWidth: 1
					},
					emphasis: {
						color: '#81acff' // 悬浮背景
					}
				}
				},
				series:seriesA, //地图	
			}
			var optionA2 = {
				toolbox: {
					show: true,
					feature: {
					mark: { show: true }}
				},
				series: [
					{
					name: 'Nightingale Chart',
					type: 'pie',
					radius: [25, 80],
					center: ['50%', '50%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 5
					},
					data: [
						{ value: 7, name: '空载车' },
						{ value: 6, name: '半载车' },
						{ value: 3, name: '满载车' },
					]
					}
				],
             color: ['red', '#ee6666','#73c0de'], //车辆加载颜色
        	};
			 // 指定目的地运输量图表的配置项和数据
			var optionA3 = {
				tooltip: {
					trigger:'axis',
					formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%'
				},
				legend: { //'订单数量(万件)','同比增长'
					data:['订单数量(万件)','同比增长']
				},
				xAxis: {
					data: ["北京","天津","上海","重庆","河北","云南"]
				},
				yAxis: [ {
					type: 'value',
					name: '订单数量(万件)',
					show:true,
					interval: 10,
					axisLine: {
						lineStyle: {
							color: '#5e859e',
							width: 2
						}
					}
				},{
					type: 'value',
					name: '同比增长',
					min: 0,
					max: 100,
					interval: 10,
					axisLabel: {
						formatter: '{value} %'
					},
					axisLine: {
						lineStyle: {
							color: '#5e859e',//纵坐标轴和字体颜色
							width: 2
						}
					}
				}],
				series: [{
					name: '订单数量(万件)',
					type: 'bar',
					barWidth : '50%',
					data: [5, 20, 36, 10, 10, 20]
				},{
					name: '同比增长',
					type: 'line',
					smooth:true,
					data: [15, 30, 46, 20, 20, 30]
				}],
				color: ['#263b7a','#2fb0ec79'],
			};
        // 目的地运输量  基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('mainA3'));
        	myChart.setOption(optionA3);
		// 车辆加载	
		var myChart = echarts.init(document.getElementById('mainA2'));	
		  	myChart.setOption(optionA2);
		// 地图		
        this.chinachart = echarts.init(document.getElementById('china_map'))
        this.chinachart.setOption(option)

    }
};
</script>

<style scoped>
  .mainBoxA{
    width: 300px;
    height: 260px;
  }
/* ---以上左边车辆加载 */
imgC1{position: relative;}
.nameC04{position: relative;top: -20px;left: 75px;}
.numC03{position: relative;top: -45px;left: 138px;}
.nameC02{position: relative;top: 72px;left: -145px;}
.numC01{position: relative;top:50px;left: -90px;}
.imgC02{position: relative;top:-70px;left: 180px;}
.imgC01{position: relative;top: 35px;left: -55px;}
.lineC01{position: relative;top: -37px;}
.Ctest01{position: relative;top: 95px;left: -80px;}
.touC2{position: relative;top: -20px;left: -93px;}
.touC1{position: relative;top: -20px;left: -82px;}
.touA3{position: relative;top: -20px;left: -76px;}
.C1{width: 8px;height: 15px;background-color: rgba(36, 36, 251, 0.593);}
.touA2{position: relative;top: -20px;left: -93px;}
.A2{width: 8px;height: 15px;background-color: rgba(36, 36, 251, 0.593);}
.touA1{position: relative;top: -20px;left: -105px;}
.A1{width: 8px;height: 15px;background-color: rgba(36, 36, 251, 0.593);}
/* ----------------------- */
.B04{position: relative;top: -15px;left: 95px;}
.B03{position: relative;top: -15px;left: 68px;}
.B02{position: relative;top: -15px}
.B01{position: relative;top: 37px;left: 28px;}
.img4{width: 50px;height: 60px;position: relative;left: -0px;top: -7px;}
.img3{width: 50px;height: 70px;position: relative;left: -38px;top: 3px;}
.img2{width: 50px;height: 60px;position: relative;left: -100px;top: -7px;}
.img1{width: 50px;height: 50px;position: relative;left: -35px;top: -13px;}
#TC1{position: relative;top: 19px;}
#TB4{position: relative;top: 80px;}
#TB3{position: relative;top: 60px; position: relative;top: 63px;}
#TB2{position: relative;top: 40px;}
#TB1{position: relative;top: 19px;}
 .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .box-card {
    width: 314px;
  }
/* ----以上是T1------------以下是地图------------------------ */
#SmaT2{width: 480px;height: 90px;position: relative;top: 22px;left: 150px;}
#SmaT1{width: 150px;height: 110px;position: relative;top:-80px;left: 20px;}
/* -----------------------地图上的标头------------------------------------ */
.map-container{
    background-color: rgb(26, 26, 68);
}
.wrapper {
  width: 700px;
  height: 600px;
  border: 1px solid red;
  position: relative;
  left: 23%;
}
.mapB {
  background-color: white;
}
.mapA {
  background-color: white; 
}
/* ----以上是地图------------------------ */
.elmaindemo {
  position: relative;
  top: -40px;
  width: 100%;
  border: 10%;
  background-color: #f3f4f7;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #f3f4f7;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>